<template>
  <div class="createProject">
    <div class="header">
      <i class="el-icon-circle-check"></i><span>创建完成，等待审批</span>
    </div>
    <div class="step">
      <el-row>
        <el-col :span="4">新建项目</el-col>
        <el-col :span="4">虚拟项目</el-col>
        <el-col :span="4">正式立项</el-col>
        <el-col :span="4">开发完结</el-col>
        <el-col :span="4">正式交付</el-col>
        <el-col :span="4">正式完结</el-col>
      </el-row>
      <el-row class="centerElRow">
        <el-col :span="4" class="center"><div class="xianLeft" style="visibility:hidden;"></div><div class="dian"></div><div class="xianRight"></div></el-col>
        <el-col :span="4" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
        <el-col :span="4" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
        <el-col :span="4" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
        <el-col :span="4" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight"></div></el-col>
        <el-col :span="4" class="center"><div class="xianLeft"></div><div class="dian"></div><div class="xianRight" style="visibility:hidden;"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="4">新建项目</el-col>
        <el-col :span="4">虚拟项目</el-col>
        <el-col :span="4">正式立项</el-col>
        <el-col :span="4">开发完结</el-col>
        <el-col :span="4">正式交付</el-col>
        <el-col :span="4">正式完结</el-col>
      </el-row>
    
    </div>
    <div class="menu">
      <el-row>
        <el-col :span="3">项目编号</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">项目编号</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
        <el-col :span="3" :offset="2">项目编号</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">项目名称</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
        <el-col :span="3" :offset="2">归属分社</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">项目概述</el-col>
        <el-col :span="21"><el-input v-model="input" type="textarea" placeholder="请输入内容" readonly resize="none" :rows="5"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="3">项目周期</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
        <el-col :span="2" style="textAlign:center">~</el-col>
        <el-col :span="8">
          <el-input v-model="input" placeholder="请输入内容" readonly></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="lookBox">
      <div @click="toViewProject">立即查看</div>
    </div>
  </div>
</template>

<script>
  export default {
     data() {
      return {
        active: 0
      };
    },
    methods:{
      toViewProject(){
        this.$router.push("/viewProject")
      }
    }
  }
</script>

<style lang="scss" scoped>
.createProject{
  width: 100%;
  padding: 64px 108px;
  .header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icon-circle-check{
      font-size: 32px;
      margin: 0px 10px;
      color: #cbcbcb;
    }
    span{
      font-size: 18px;
    }
  }
  .step{
    text-align: center;
    margin: 20px 0px;
    color: #aaaaaa;
    .centerElRow{
      display: flex;
      justify-content: center;
    }
    .center{
      display: flex;
      align-items: center;
      margin: 10px 0px;
      .xianLeft{
        flex: 1;
        border: 1px solid #aaaaaa;
        background: #aaaaaa;
      }
      .dian{
        width: 11px;
        height: 11px;
        border: 1px solid #797979;
        background: #aaaaaa;
        border-radius: 50%;
        margin: 0px 10px;
      }
      .xianRight{
        flex: 1;
        border: 1px solid #aaaaaa;
        background: #aaaaaa;
      }
    }
  }
  .menu{
    width: 620px;
    height: 326px;
    margin: 50px auto;
    .el-row{
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
  }
  .lookBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      width: 162px;
      height: 49px;
      text-align: center;
      line-height: 49px;
      background: #d7d7d7;
    }
  }
}

</style>